<template>
  <div>
    <u-popup :show="show" round="10px" mode="bottom" @close="cancel" :closeOnClickOverlay="true">
      <div class="jb_popup">
        <div class="title">
          <text class="h1">请填写举报原因</text>
          <text class="h2">（必选） *</text>
        </div>
        <div class="check_wrap">
          <u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
            <u-checkbox
              shape="circle"
              activeColor="#ff8822"
              :customStyle="{ margin: '7.5px 0' }"
              v-for="(item, index) in checkboxList1"
              :key="index"
              :label="item.name"
              :name="item.name"
            ></u-checkbox>
          </u-checkbox-group>
        </div>
        <div class="second_title">问题描述</div>
        <textarea v-model="content" placeholder="请补充说明，方便客服核实具体情况" placeholder-class="textarea-placeholder" @input="" />
        <div class="bottom_btn_wrap">
          <div class="btn cancel" @click="cancel">取消</div>
          <div class="btn submit" @click="submit">提交</div>
        </div>
      </div>
    </u-popup>
  </div>
</template>

<script>
export default {
  name: "phoneCode",
  props: {
    show: {
      type: Boolean,
      default: true,
    },
    type: {
      type: Number || String,
      default: 1, //1 职位，2简历
    },
    id: {
      type: Number || String, //1 职位，2简历
    },
    userId: {
      type: Number || String, //1 职位，2简历
    },
  },
  conpontents: {},
  data() {
    return {
      showcontactPopup: false,
      checkboxValue1: [],
      // 基本案列数据
      checkboxList1: [
        {
          name: "诈骗/收费",
          disabled: false,
        },
        {
          name: "薪资虚假",
          disabled: false,
        },
        {
          name: "代招冒充直招",
          disabled: false,
        },
        {
          name: "无法联系到招聘方",
          disabled: false,
        },
        {
          name: "其他",
          disabled: false,
        },
      ],
      content: "",
    };
  },
  computed: {},
  methods: {
    checkboxChange(n) {
      console.log("change", n);
    },
    async submit() {
      setTimeout(() => {
        this.content = "";
      }, 3000);
      this.$emit("submit", {
        reason: this.checkboxValue1.join(","), //选项逗号分隔文字
        des: this.content, //描述
      });
    },
    cancel() {
      this.$emit("cancel");
    },
  },
  watch: {},
  onLoad(options) {
    console.log(options);
  },
  // 组件周期函数--监听组件挂载完毕
  mounted() {},
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
};
</script>

<style scoped lang="scss">
.jb_popup {
  width: 100%;
  height: 457px;
  box-sizing: border-box;
  padding: 15px 16px;
  .title {
    width: 100%;
    height: 22px;
    font-size: 16px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;

    .h2 {
      color: #ff8822;
    }
  }
  .check_wrap {
    margin: 10.5px 0 21px 0;
  }
  .second_title {
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
  }
  textarea {
    width: 345px;
    height: 101px;
    background: #fafafa;
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
    border: 1px solid #e8e8e8;
    margin-top: 9px;
    box-sizing: border-box;
    padding: 10px;
  }
  .bottom_btn_wrap {
    display: flex;
    justify-content: space-around;
    margin-top: 21px;
    .btn {
      width: 168px;
      height: 42px;
      border-radius: 21px 21px 21px 21px;
      font-size: 16px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      text-align: center;
      line-height: 42px;
    }
    .cancel {
      background: rgba(228, 228, 228, 0);
      border: 1px solid #aaaaaa;
      color: #999999;
    }
    .submit {
      color: #ffffff;
      background: linear-gradient(90deg, #ffa222 0%, #ff8822 100%);
    }
  }
}
</style>
